<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Libraries</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

    const { Component } = React
    const { render } = ReactDOM

    const Expandable = ComposedComponent =>
        class Expandable extends Component {

            constructor(props) {
                super(props)
                const collapsed = (props.hidden && props.hidden === true) ? true : false
                this.state = {collapsed}
                this.expandCollapse = this.expandCollapse.bind(this)
            }

            expandCollapse() {
                this.setState(prevState => ({
                  collapsed: !prevState.collapsed
                }))
            }

            render() {
                return <ComposedComponent
                            expandCollapse={this.expandCollapse}
                            {...this.state}
                            {...this.props} />
            }
        }

    class MenuButton extends Component {

        componentWillReceiveProps(nextProps) {
            const collapsed = (nextProps.collapsed && nextProps.collapsed === true) ? true : false
            this.setState({collapsed})
        }

        render() {
            const {children, collapsed, txt, expandCollapse} = this.props
            return (
                <div className="pop-button">
                    <button onClick={expandCollapse}>{txt}</button>
                    {(!collapsed) ?
                        <div className="pop-up">
                            {children}
                        </div> :
                        ""
                    }
                </div>
            )
        }
    }

    const PopUpButton = Expandable(MenuButton)

    render(
        <PopUpButton hidden={true} txt="toggle popup">
            <h1>Hidden Content</h1>
            <p>This content will start off hidden</p>
        </PopUpButton>,
        document.getElementById('react-container')
    )


  </script>
</body>
</html>
